﻿<?php
require_once('../db/check_login.php');
require_once('../db/config.php');
$db=new db($config);
$id=$_GET['id'];
$data=$db->foundbyId('article',$id);
$artclassData=$db->foundbyId('artclass',$data['type']);	
$data['type']=$artclassData['name'];//找到这篇文章的数据,转换type类型名称
$commentData=$db->foundbywhere('artcomment',"articleId=$id ORDER BY id DESC");
foreach($commentData as $key=>$val){
$praiseId=$val['id']."_0";
$praiseNum=$db->countbyWhere('commentpraise',"praise_Id='$praiseId'");
$commentData[$key]['praiseNum']=$praiseNum;
$userData=$db->foundOnebyWhere('user',"user='$val[commenter]'");
$commentData[$key]['userImg']=$userData['userImg'];	//找到评论者的头像
$replyData=$db->foundbywhere('commentreply',"commentId='$val[id]' ORDER BY id DESC");

foreach($replyData as $k=>$value){
$praiseId=$val['id']."_".$value['id'];
$praiseNum=$db->countbyWhere('commentpraise',"praise_Id='$praiseId'");
$replyData[$k]['praiseNum']=$praiseNum;
$userDatas=$db->foundOnebyWhere('user',"user='$value[replyerFrom]'");
$replyData[$k]['userImg']=$userDatas['userImg'];//找到回复者的头像
}
$commentData[$key]['replyData']=$replyData;	
}
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.tabBody{ margin-left:200px;margin-right:200px;}
.commentBody{
margin-left:200px;
margin-right:200px;
margin-bottom:0px;
height:42px;
border-style:none none solid none;
border-width:1px;
border-bottom-color:#CCC;
}
#content{ width:100%; height:80px;}
#commentButton{ float:right;}
#replyArea{margin-left: 50px;margin-top:-16px; margin-bottom:32px;height:80px;}
#noComment{margin-left:200px;margin-right:200px;}
#replyContent{width:100%; height:80px;}
#replyButton{float:right;}
a{text-decoration:none;}
.commentBox{
 margin-left:200px;
 margin-right:200px;
 margin-top:5px;
 font-size:16px;
 border-style:none none solid none;
 border-width:1px;
 border-bottom-color:#CCC;
 height:auto;
}
.replyBox{
 padding-left:10px;
 padding-top:5px;
 margin-left: 50px;
 height:auto;
}
.boxUserImg{
	padding-left:0px;
	border:1px solid #CCC;
	margin-top:5px;
	width:42px;
	height:42px;
	}
.boxUser{
	padding-left:10px;
	margin-left: 50px;
	margin-top:-43px;
	padding-top:-5px;
}
.boxContent{
	padding-left:10px;
	margin-left: 50px;
	margin-top:4.5px;
	}
.boxBottom{
    padding-left:10px;
	margin-left: 50px;
	margin-top:5px;
	padding-bottom:12px;
	}

.reply{float:right;}
.praise{float:right;}
.praiseNum{float:right; margin-right:10px;}
span.userName{ color:#F00;}
</style>
</head>
<body bgcolor="#66FFFF">
<div class='tabBody'>
<p><div align="center"><?php echo $data['title']?></div></p>
<p><div align="center"><?php echo $data['type']?>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<?php echo $data['sub_time']?>
</div>
</p>
<p><?php echo $data['content']?></p>
<form action="" method="post">
<textarea name="content" id="content" style='font-size:16px;' placeholder="说点什么吧......"></textarea>
<input type="button" name='sub' id='commentButton' value='发表评论'/>
<input type="hidden" name="articleId" id='articleId' value="<?php echo $data['id']?>"/>
<input type="hidden" name="commenter" id='commenter' value="<?php echo isset($_SESSION['user'])?$_SESSION['user']:'null' ?>"/>
<input type="hidden" id='userIp' value="<?php echo $_SERVER["REMOTE_ADDR"]?>"/>
</form>
</div>
<br>
<div class='commentBody'>最新评论
</div>
<?php if(!empty($commentData)):?>
<?php foreach($commentData as $val):?>
<div class='commentBox'>
<div class='boxUserImg'><img src="<?php echo $val['userImg']?>" width="40px" height="40px"/></div>
<div class='boxUser'><span class="userName"><?php echo $val['commenter']?></span></div>
<div class='boxContent'><?php echo $val['content']?></div>
<div class='boxBottom' attr-id='<?php echo $val['id']."_0"?>'><?php echo $val['comment_time']?><span class='reply' attr-show='off' attr-id="<?php echo $val['id']."_0"?>" attr-user='<?php echo $val['commenter']?>'><a href='javascript:;'>回复</a></span><span class='praiseNum' praise-id="<?php echo $val['id']."_0"?>"><?php echo "(".$val['praiseNum'].")"?></span><span class="praise" attr-praiseId="<?php echo $val['id']."_0"?>"><a href='javascript:;'>赞</a></span>
</div>
<?php if(!empty($val['replyData'])):?>
<?php foreach($val['replyData'] as $value):?>
<div class='replyBox'>
<div class='boxUserImg'><img src="<?php echo $value['userImg']?>" width="40px" height="40px"/></div>
<div class='boxUser'><span class="userName"><?php echo $value['replyerFrom']?></span>回复<span class="userName"><?php echo $value['replyerto']?></span></div>
<div class='boxContent'><?php echo $value['content']?></div>
<div class='boxBottom' attr-id="<?php echo $value['commentId']."_".$value['id']?>"><?php echo $value['reply_time']?><span class='reply' attr-show='off' attr-id="<?php echo $value['commentId']."_".$value['id']?>" attr-user='<?php echo $value['replyerFrom']?>'><a href='javascript:;'>回复</a></span><span class='praiseNum' praise-id="<?php echo $value['commentId']."_".$value['id']?>"><?php echo "(".$value['praiseNum'].")"?></span><span class="praise" attr-praiseId="<?php echo $value['commentId']."_".$value['id']?>"><a href='javascript:;'>赞</a></span>
</div>
</div>
<?php endforeach;?>
<?php endif;?>
</div>
<?php endforeach;?>
<?php else:?>
<div id='noComment'>暂无评论.....</div>
<?php endif;?>

<script src="../js/jquery-2.0.js"></script>
<script type = "text/javascript">
$(document).ready(function(){
 $('#commentButton').click(function() {
  var commenter = $('#commenter').val();
  var articleId = $('#articleId').val();
  var content = $('#content').val();
  if (content == '') {
  $('#content').val('请输入评论内容!');
  setTimeout("$('#content').val('')",1000);
   }else if($('#content').val()=='请输入评论内容!'){
	 return false;
   }else{
   $.getJSON("comment.php", {
     getCommenter: commenter,
     getArticleId: articleId,
     getContent: content},function(json) {
     if (json['errorCode']==0){
    var newComment = json['commentData'];
    $('.commentBody').after(newComment);//在最前面插入新的评论
    $('#content').val('');
	 if($('#noComment').is(":visible")){
		$('#noComment').remove(); 
	 }
           }
          });
        }
    });
 //回复链接点击事件
var order=0; 
$(document).on('click', '.reply', function (){
 var replyTo=$(this).attr('attr-user');
 var attrId=$(this).attr('attr-id');//获取唯一的id
 if(attrId!==order){
  $("div[orderId="+order+"]").remove();
  //当两次点击的'.reply'不同时,移除之前点击生成的内容
  $("span[attr-id="+order+"]").attr('attr-show','off');
  //将之前点击生成的attr-show改为off
  order=attrId;
  $(this).attr('attr-show','on');
  var reply="<div id='replyArea' orderId='"+attrId+"'><textarea id='replyContent' style='font-size:16px;' placeholder='回复:"+replyTo+"'></textarea><input type='button' name='sub' id='replyButton' value='发表评论'/></div>";
$("div[attr-id="+attrId+"]").after(reply);	
 }else{
  if($('#replyContent').is(":visible")){
  //$("span[attr-id="+attrId+"]").attr('attr-show','off');
  $(this).attr('attr-show','off');
  $("div[orderId="+attrId+"]").remove();
  }else{
 $(this).attr('attr-show','on');
 var reply="<div id='replyArea' orderId='"+attrId+"'><textarea id='replyContent' style='font-size:16px;' placeholder='回复:"+replyTo+"'></textarea><input type='button' name='sub' id='replyButton' value='发表评论'/></div>";
 $("div[attr-id="+attrId+"]").after(reply);	  
	  }
	 }
 });
 
  //评论和回复的'发表评论'点击事件
 $(document).on('click', '#replyButton', function (){
 var attrId=$("span[attr-show='on']").attr('attr-id');
 var replyTo=$("span[attr-show='on']").attr('attr-user');
 var commenter=$("#commenter").val();//自己登陆,评论者是自己
 var replyContent=$('#replyContent').val();
  if(replyContent==''){
	 alert('请输入评论内容');
	 return false;
 }else{
	$.getJSON("reply.php", {getAttrId:attrId,getReplyTo:replyTo,getCommenter:commenter,getReplyContent:replyContent},function(json) {
	if(json['errorCode']==0){
	var newReply = json['replyData'];
    $("div[attr-id="+json['commentId']+"_0]").after(newReply);
	$('#replyArea').remove(); 
	}
	}); 
 }
 });
  //赞点击事件
   $(document).on('click', '.praise', function (){
    var praiseId=$(this).attr('attr-praiseId');
	var ip=$('#userIp').val();  
	$.getJSON("praise.php",{getPraiseId:praiseId,userIp:ip},function(data){
	 if(data['errorCode']==0){
	 $("span[praise-id="+praiseId+"]").html("("+data['num']+")");
	 }else{
	 alert(data["msg"]);	  
	 }
	});
   });	

});
</script>
</body>
</html>